<template>
    <el-row>
        <el-input v-model="formDate.id" class="center" style="width: 400px;" placeholder="请输入学号" /><br>
        <el-input v-model="formDate.name" class="center" style="width: 400px;" placeholder="请输入姓名" />
        <el-input v-model="formDate.age" class="center" style="width: 400px;" placeholder="请输入年龄" />
        <el-button @click="clearData" class="center" width="50px" type="primary">清空输入框</el-button>
        <el-button @click="submit" class="center" width="50px" type="primary">添加</el-button>
    </el-row>


    <!-- 总数 -->
    <div class="center">
        <!-- 改造点2 -->
        学生总数：{{ totalNum }}
    </div>

    <el-table class="center" ref='multipleTableRef' :data="students" style="width: 50%"
        @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" />
        <el-table-column prop='id' label="学号" width="180" />
        <el-table-column prop='name' label="姓名" width="180" />
        <el-table-column prop='age' label="年龄" width="180" />
        <el-table-column label="操作">
            <template #default="scope">
                <el-button size="small" @click="editData(scope.$index)">Edit</el-button>
                <el-button size="small" type="danger" @click="deleteData(scope.$index, scope.row);handleDelete(scope.$index, scope.row); open()">Delete</el-button>
            </template>
        </el-table-column>
    </el-table>
    <!-- 数据表格 -->
</template>
  
<script setup>
import { ref, computed, onMounted } from "vue";
import { ElTable } from 'element-plus'
import { ElMessage, ElMessageBox } from 'element-plus'


const open = () => {
    ElMessageBox.confirm(
        '请确定是否继续?',
        '警告',
        {
            confirmButtonText: '确定',
            cancelButtonText: '关闭',
            type: 'warning',
        }
    )
        .then(() => {
            ElMessage.success('删除成功')
        })
        .catch(() => {
            ElMessage.info('取消删除')
        })
}



const multipleSelection = ref([])
const handleSelectionChange = (val) => {
    console.log('val', val);
    multipleSelection.value = val

}

const handleEdit = (index, row) => {
    console.log(index, row)
}
const handleDelete = (index, row) => {
    console.log(index, row)
}


// 表单数据

const formDate = ref([
    {
        id: '',
        name: '',
        age: ''
    }
])


const status = ref('add')




// 清空
const clearData = () => {
    formDate.value = {
        id: '',
        name: '',
        age: ''
    }  
    status.value = 'add'
}


//提交
const submit = () => {
    // 判断是否为新增状态
    if (status.value == 'add') {
        students.value.push(formDate.value)
    }
    clearData()

}


// 修改
const editData = (index) => {
    formDate.value = students.value[index]
    status.value = "edit"
}



//删除
const deleteData = (index) => {
    students.value.splice(index, 1)
}


const students = ref([])
// 学生数量
const totalNum = computed(() => {
    return students.value.length
})

onMounted(() => {
    students.value = [{
        id: '001',
        name: '刘备',
        age: '18'

    },
    {
        id: '001',
        name: '刘备',
        age: '18'
    },
    {
        id: '001',
        name: '刘备',
        age: '18'
    }

    ]


});
</script>
  
<style scoped>
.center {
    margin: auto
}
</style>